<template>
  <div>
      <button @click="sendSse">发送 SSE 请求</button>
      <div>
          {{ messages }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'Sse',
  data() {
      return {
          messages: '', // 存储接收到的消息
          sse: null, // EventSource 实例
      };
  },
  methods: {
      async sendSse() {
          // 一、第一种方法，使用EventSource开启SSE
          // const source = new EventSource('http://localhost:3000/sse');
          // source.onopen = () => {
          // console.log('建立连接');
          // };

          // source.onerror = (err) => {
          // console.log('断开链接', err);
          // source.close();
          // };

          // source.onmessage = (event) => {
          // console.log('推送数据:', event.data);
          // this.messages += event.data
          // };
          // 二、第二种方法，使用fetch开启SSE
          try {
              const response = await fetch('http://localhost:3000/sse');
              if (!response.ok) {
                  throw new Error('网络响应异常');
              }

              const reader = response.body.getReader(); // 获取 ReadableStream 的读取器
              const decoder = new TextDecoder('utf-8'); // 创建解码器

              // 持续读取流数据
              while (true) {
                  const { done, value } = await reader.read(); // 读取数据块
                  if (done) {
                      console.log('流结束');
                      break; // 流结束
                  }
                  const text = decoder.decode(value); // 解码数据
                  this.messages += text; // 存储接收到的数据
                  console.log('接收到数据:', text);
              }
          } catch (error) {
              console.error('SSE 请求失败:', error);
          }
      }
  },
  beforeDestroy() {
      // 组件销毁时关闭 EventSource
      if (this.sse) {
          this.sse.close();
      }
  },
};
</script>